<template>
  <div>
    <my-header></my-header>
    <div>
      <!-- 购物车上部汇总栏目 -->
      <div id="totalPro">
        <input type="checkbox" name="" id="allChe" />
        <span class="img-wid">全选</span>
        <span class="goods-intro">商品</span>
        <span class="wid-one">单价</span>
        <span>数量</span>
        <span>小计</span>
        <span>操作</span>
      </div>
      <!-- 购物车详情 -->
      <ul>
        <li>
          <div class="sacc d-flex">
            <span class="anyway">量减</span>
            <div>
              <p>
                购买数量满20箱,单价减0.1元；购买数量满80箱,单价减0.15元；购买数量满200箱,单价减0.25元；
              </p>
            </div>
          </div>
          <!-- 购物车部分正式 -->
          <ul style="height: 110px" v-for="(v, i) of this.list" :key="i">
            <li class="every-bar">
              <ul class="dis-fle d-flex">
                <li><input type="checkbox" name="" id="" /></li>
                <li><img :src="`${v.pic}`" alt="" /></li>
                <li class="goods-introdu">
                  <p>{{ v.title }}</p>
                  <p class="three">
                    <span
                      >10kg/箱&nbsp;&nbsp;{{ v.spec }}&nbsp;&nbsp;{{
                        v.district
                      }}&nbsp;&nbsp;&nbsp;小件</span
                    >
                  </p>
                </li>
                <li class="price">
                  ￥
                  <span>{{ v.price }}</span>
                </li>
                <li class="shu d-flex justify-content-center">
                  <span class="set-wid" @click="red(i)" :disabled="v.count <= 1"
                    >-</span
                  >
                  <span class="set-some">{{ v.count }}</span>
                  <span class="set-wid" @click="add(i)">+</span>
                </li>
                <li class="total">
                  ￥
                  <span>{{ v.price * v.count }}</span>
                </li>
                <li class="dothing">
                  <a href="#" @click="removeHandler(i)">删除</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <!-- 购物车结算 -->
      <div id="getAccount">
        <div id="accountPro" class="d-flex justify-content-lg-end">
          <p>
            <span>总计金额:</span>
            <span class="totalAccount">{{ totalPrice | showPrice }}</span>
          </p>
          <p id="settlement">结算</p>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import {mapState} from "vuex";
import {mapMutations} from "vuex"
// import axios from "axios";
export default {
  data() {
    return {
      // 购物车
      n: "1",
      list: [],
      //设置一个空对象来装将要加入数组的数据
      // s:[]
    };
  },
  methods: {
    ...mapMutations(["setShop"]),
    red(i) {
      if (this.n > 0) {
        this.list[i].count--;
      }
    },
    add(i) {
      this.list[i].count++;
    },
    // 删除当前商品项目
    removeHandler(i) {
      this.list.splice(i, 1);
      // 6.调用vuex中的setShop方法把当前数组的数据返回vuex
      // this.$store.commit('setShop',this.list)
      this.setShop(this.list);
    },
    //添加从详情页传来的商品加入当前购物车列表
    // addHander(){
    //   this.list.push(this.s);
    // }
    
  },
  filters: {
    showPrice(price) {
      return "¥" + price.toFixed(2);
    },
  },
  mounted() {
    // 4.将shopCart的数据赋值给list数组，在shopCart组件中使用
    this.list=this.shopCart;

    // this.list = this.$store.state.shopCart
    console.log(this.list)
  },
  computed: {
    totalPrice: function () {
      return this.list.reduce(function (pre, v) {
        return pre + v.price * v.count;
      }, 0);
    },
    ...mapState(["shopCart"])
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

body {
  font: 12px/1 Tahoma, Helvetica, Arial, "微软雅黑", Arial, "\5b8b\4f53",
    sans-serif;
}

a {
  text-decoration: none !important;
  color: black;
}

#totalPro {
  height: 40px;
  line-height: 40px;
  /* white-space: nowrap; */
  /* font-size: 0; */
  background-color: #f6f6f6;
  /* border: 1px solid #333333; */
}

/* 购物车上部汇总栏目 */
#totalPro > input {
  margin: 0 20px 0 10px;
}

#totalPro span {
  font-size: 12px;
}

.img-wid {
  display: inline-block;
  width: 100px;
}

.goods-intro {
  display: inline-block;
  width: 300px;
  text-align: center;
  /* margin-left: 20px; */
}

.wid-one {
  display: inline-block;
  width: 200px;
  text-align: center;
  margin-left: 20px;
}

#totalPro > span:nth-child(5) {
  display: inline-block;
  width: 141px;
  text-align: center;
  margin-left: 50px;
}

#totalPro > span:nth-child(6) {
  display: inline-block;
  width: 100px;
  text-align: center;
  margin-left: 20px;
}

#totalPro > span:nth-child(7) {
  display: inline-block;
  width: 100px;
  text-align: center;
  margin-left: 20px;
}

.sacc {
  margin-left: 43px;
  line-height: 30px;
  /* display: flex; */
  zoom: 1;
  /* overflow: hidden; */
  height: 30px;
}

.anyway {
  margin-right: 10px;
  margin-top: 5px;
  display: inline-block;
  margin-right: 20px;
  width: 39px;
  height: 20px;
  background: url(https://www.ewfresh.com/images/manmai.png) no-repeat 0 -531px;
  text-align: center;
  line-height: 20px;
  color: white;
  /* float: left; */
}

.every-bar {
  border: 1px solid #f3f3f3;
  margin-top: -1px;
}

.dis-fle > li {
  height: 100px;
}

.dis-fle > li:first-child {
  margin: 0 20px 0 10px;
  line-height: 100px;
}

.dis-fle > li:nth-child(2) img {
  width: 100px;
  height: 100px;
}

.goods-introdu {
  display: inline-block;
  width: 300px;
  margin-top: 10px;
}

.goods-introdu p:first-child {
  font-size: 14px;
  font-weight: 700;
}

.goods-introdu p:first-child:hover {
  color: red;
  cursor: pointer;
}

.goods-introdu p {
  margin-left: 50px;
  line-height: 20px;
}

.price {
  line-height: 100px;
  display: inline-block;
  width: 240px;
  text-align: center;
  margin-left: 20px;
}

.shu {
  display: inline-block;
  width: 200px;
  text-align: center;
  margin-left: 30px;
  height: 100px;
  line-height: 100px;
}

.set-wid {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #cccccc;
  line-height: 20px;
  text-align: center;
  margin-top: 40px;
  cursor: pointer;
}

.set-some {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: #edebeb;
  line-height: 20px;
  text-align: center;
  margin-top: 40px;
  border: 0;
  outline: none;
}

.total,
.dothing {
  display: inline-block;
  width: 119px;
  text-align: center;
  margin-left: 20px;
  line-height: 100px;
}

.dothing a:hover {
  color: red;
}

#getAccount {
  line-height: 40px;
  background-color: #f6f6f6;
  zoom: 1;
  height: 40px;
}

#accountPro {
  width: 100%;
  height: 100%;
}

#accountPro #settlement {
  width: 70px;
  height: 40px;
  text-align: center;
  background-color: #d61a39;
  color: white;
  font-weight: 600;
}

#accountPro p:nth-child(2) {
  margin-left: 30px;
}

.totalAccount {
  font-weight: 700;
  font-size: 16px;
  color: #d61a39;
}
</style>